<template>
	<view class="padding">
		<u-index-list :scrollTop="scrollTop" :index-list="Object.keys(obj)">
			<view v-for="(item,key,index) in obj" :key="index">
				<u-index-anchor :index="key" />
				<view @tap='goHome' :data-obj='item1' class="list-cell u-border-bottom" v-for="(item1, i) in item" :key="i">
					{{item1.areaName}}
				</view>
			</view>
		</u-index-list>
	</view>
</template>

<script>
	// import indexList from "@/common/city.js";
	import {
		hotelArea
	} from '@/api/api.js';
	export default {
		data() {
			return {
				obj:{},
				scrollTop: 0,
				haveHoteCityList: []
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			this.getHotelArea();
		},
		methods: {
			getHotelArea() {
				uni.showLoading();
				hotelArea().then(res => {
					if (res.code == 200) {
						uni.hideLoading();
						this.haveHoteCityList = res.data;
						this.obj = res.data;
					}else{
						uni.hideLoading();
					}
				})
			},
			goHome(event){
				let obj = event.currentTarget.dataset.obj;
				this.$store.dispatch('SetArea',{
					areaName:obj.areaName,
					areaCode:obj.areaCode
				});
				uni.$emit('updateHotelList');
				uni.navigateBack();
			},
			pySegSort(arr) {
				var letters = "*ABCDEFGHJKLMNOPQRSTWXYZ".split('');
				var zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀".split('');
				var segs = []; // 存放数据
				var py = []; // 存放首字母
				var res = {};
				letters.forEach((item, index) => {
					let curr = {
						letter: item,
						list: []
					}
					arr.forEach((item, j) => {
						if ((!zh[index - 1] || zh[index - 1].localeCompare(item.areaName) <= 0) && item.areaName.localeCompare(zh[index]) < 0) {
							curr.list.push(item);
						}
					})
					if(curr.list.length) {
						py.push(item);
						segs.push(curr);
						curr.list.sort(function(a, b) {
							return a.areaName.localeCompare(b.areaName);
						});
					}
				})
				res["segs"] = segs;
				res["py"] = py;
				return res;
			}
		}
	}
</script>

<style lang="scss">
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>
